<template>
	<view class="comments">
		<view class="weui-panel weui-panel_access" @tap="goBack">
			<view class="weui-panel__bd">
				<view class="weui-media-box weui-media-box_appmsg">
					<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
						<image class="weui-media-box__thumb" mode="aspectFill" :src="image.path"></image>
					</view>
					<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
						<view class="weui-media-box__title">{{image.name}}</view>
						<view class="weui-media-box__desc">{{image.detail}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="page__bd">
			<view class="weui-tab">
				<view class="weui-navbar">
					<view :class="['weui-navbar__item', {'weui-bar__item_on':showSelected}]" @tap="showSelected=true">
						<view class="weui-navbar__title">精选评论</view>
					</view>
					<view :class="['weui-navbar__item', {'weui-bar__item_on':!showSelected}]" @tap="showSelected=false">
						<view class="weui-navbar__title">最近评论</view>
					</view>
				</view>
				<view class="weui-tab__panel">
					<!-- :hidden="!showSelected" -->
					<view class="weui-tab__content" v-show="showSelected">
						<view class="weui-article">
							<view class="weui-loadmore" v-if="!selectedComments">
								<view class="weui-loading"></view>
								<view class="weui-loadmore__tips">正在加载</view>
							</view>
							<view class="weui-article__section">
								<view class="weui-article__p" v-for="item in selectedComments" :key="item.id">
									<text>{{item.nickname}}</text>：{{item.content}}
									<view class="comment-info">
										<view>({{item.timeStr}}<view v-if="item.fromPackage"> &nbsp;来自<view class="package-link">祝福锦囊</view></view>)</view>
										<view @tap="vote(item.id, item.myvote)">
											<view :class="['iconfont', 'icondianzan', {'selected-vote':item.myvote}]"></view>
											<view v-if="item.upvote>0"> ({{item.upvote}})</view>
										</view>
									</view>
								</view>
							</view>
							<view class="load-more">
								<view class="load-more-button" v-if="!selectedCommentsNoMore" @tap="loadMore('selected', selectedComments.length)">加载更多</view>
								<view class="load-more-nomore" v-if="selectedCommentsNoMore">没有了</view>
							</view>
						</view>
					</view>
					<view class="weui-tab__content" v-show="!showSelected">
						<view class="weui-cells weui-cells_after-title" v-if='!showModal'>
							<view class="weui-cell">
								<view class="weui-cell__bd comment-text">
									<!-- <textarea class="weui-textarea comment-text" bindblur="bindTextAreaBlur" auto-height placeholder="说点什么"></textarea> -->
									<textarea class="weui-textarea" auto-height maxlength="140" placeholder="说点什么" v-model.trim="myComment"></textarea>
									<view class="weui-textarea-counter">{{myComment.length}}/140 <view class="comment-button" @tap="commentSend">评论</view>
									</view>
								</view>
							</view>
						</view>
						<view class="weui-article">
							<view class="weui-article__section">
								<view class="weui-article__p" v-for="item in recentComments" :key="item.id" @longpress="moveToSelected(item.id)">
									<text>{{item.nickname}}</text>：{{item.content}}
									<view class="comment-info">
										<view>({{item.timeStr}}<view v-if="item.fromPackage"> &nbsp;来自<view class="package-link">祝福锦囊</view></view>)</view>
										<view @tap="vote(item.id, item.myvote)">
											<view :class="['iconfont', 'icondianzan', {'selected-vote':item.myvote}]"></view>
											<view v-if="item.upvote>0"> ({{item.upvote}})</view>
										</view>
									</view>
								</view>
							</view>
							<view class="load-more">
								<view class="load-more-button" v-if="!recentCommentsNoMore" @tap="loadMore('recent', recentComments.length)">加载更多</view>
								<view class="load-more-nomore" v-if="recentCommentsNoMore">没有了</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="model" v-show="showModal">
			<view class="modalDlg">
				<view class='windowRow'>
					<text class='userTitle'>请输入您的昵称</text>
					<icon type="cancel" size="18" color="#aaa" @tap='cancel'></icon>
				</view>
				<view class='wishName'>
					<input v-model.trim="nickName" placeholder="最多10个字" maxlength="10" class='wish_put'></input>
				</view>
				<view class='wishbnt'>
					<view class='wishbnt_bt' @tap='onAnonymous'>使用匿名</view>
					<view class='wishbnt_bt' @tap='onNickName' style="border-left-color:#666">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sys from '../common/sys.js'
	import utils from '../common/function.js'
	import '../common/TCaptcha.js'
	import {
		CacheList,
		CacheMap
	} from '../common/cache.js'
	import {
		CrystalImage
	} from '../common/service.js'
	const IMG = new CrystalImage()

	export default {
		name: "image-comments",
		props: {
			imageId: {
				type: Number
			}
		},
		data() {
			return {
				image: {
					id: 0,
					name: '',
					detail: '',
					path: ''
				},
				selectedComments: [],
				recentComments: [],
				showSelected: true,
				myComment: '',
				showModal: false,
				nickName: '',
				recentCommentsNoMore: true,
				selectedCommentsNoMore: true,
			};
		},
		watch: {
			'imageId': {
				immediate: true,
				handler: async function(imageId) {
					IMG.get(imageId).then((img)=>{
						this.image = img
					})
					IMG.selectedComments(imageId).then(comments => {
						this.selectedComments = comments.map(c => {
							c.timeStr = utils.formatTimeMinute(c.time);
							return c
						})
						if(comments.length==20) this.selectedCommentsNoMore = false
					})
					IMG.recentComments(imageId).then(comments => {
						this.recentComments = comments.map(c => {
							c.timeStr = utils.formatTimeMinute(c.time);
							return c
						})
						if(comments.length==20) this.recentCommentsNoMore = false
					})
					// this.checkAdmin()
					this.nickName = sys.get_cache('nickName')
				}
			}
		},
		methods: {

			// checkAdmin: function() {
			// 	this.isAdmin = sys.get_cache('openid') == 'oJVUa0dpUTfxQa4w2zIC9wJWAiG4'
			// },

			commentSend: function() {
				if (this.myComment.length > 0) this.showModal = true
				else sys.toast('不允许评论内容为空！')
			},

			vote: function(commentId) {
				if (this.showSelected) {
					this.selectedComments = this.selectedComments.map(this.opComment(commentId))
				} else {
					this.recentComments = this.recentComments.map(this.opComment(commentId))
				}
			},
			opComment: function(commentId) {
				return (c) => {
					if (c.id == commentId) {
						if (c.myvote) {
							c.upvote--
							IMG.cancelUpvoteComment(commentId)
						} else {
							c.upvote++
							IMG.upvoteComment(commentId)
						}
						c.myvote = !c.myvote
					}
					return c
				}
			},
			
			loadMore: async function(type, curLen){
				let nextPage = curLen /20 + 1
				if(type=='selected'){
					let res = await IMG.selectedComments(this.image.id, nextPage)
					if(res.length>0) this.selectedComments = this.selectedComments.concat(res)
					if(res.length<20) this.selectedCommentsNoMore = true
				}else{
					let res = await IMG.recentComments(this.image.id, nextPage)
					if(res.length>0) this.recentComments = this.recentComments.concat(res)
					if(res.length<20) this.recentCommentsNoMore = true
				}
			},

			cancel: function() {
				this.showModal = false
			},

			onNickName: function() {
				this.showModal = false
				if (this.nickName.length > 0) this.sendComment(this.nickName)
				else this.sendComment('匿名')
			},

			onAnonymous: function() {
				this.showModal = false
				this.sendComment('匿名')
			},

			sendComment: function(nickName) {
				const self = this
				new TencentCaptcha('2034859887', async function(captcha){
					// console.log(captcha)
					if(captcha.ret==0){
						sys.toast_loading('发送中')
						await IMG.comment(self.image.id, nickName, self.myComment, '', captcha)
						sys.toast_hide()
						sys.toast_done('已发送')
						self.recentComments.unshift({
							id: Date.now(),
							nickname: nickName,
							content: self.myComment,
							timeStr: utils.formatTimeMinute(new Date()),
							myvote: false,
							upvote: 0,
						})
						sys.set_cache('nickName', nickName)
						self.myComment = ''
					}
				}).show()
			},
			
			goBack:function(){
				this.$emit('tapdetail')
			}

			// moveToSelected: async function(e) {
			// 	if (!this.data.isAdmin) return
			// 	console.log(e.currentTarget.dataset.commentId)
			// 	let cid = e.currentTarget.dataset.commentId
			// 	let comments = this.data.recentComments
			// 	let comment = comments.find(c => c._id == cid)
			// 	if (await sys.modal('确认移动到精选？', comment.nickName + ':' + comment.content)) {
			// 		remote.markCommentSelected(cid)
			// 		this.setData({
			// 			recentComments: comments.filter(i => {
			// 				i._id != cid
			// 			})
			// 		})
			// 		let selected = this.data.selectedComments
			// 		selected.push(comment)
			// 		selected.sort((a, b) => a.upvote - b.upvote)
			// 		this.setData({
			// 			selectedComments: selected
			// 		})
			// 	}
			// },
		}
	}
</script>

<style>
	@import "../static/weui.min.css";

	.comments {
		background-color: #2d3132;
		text-align: left;
		display: flex;
		flex-direction: column;
	}
	
	.page__bd{
		height: calc(100% - 90px);
	}

	.weui-panel {
		background-color: #2d3132;
		margin-top: 0;
	}
	.weui-panel::before {
		border: none;
	}
	.weui-panel:after {
		border-bottom-color: #666;
	}

	.weui-media-box__title {
		color: aliceblue;
	}

	.weui-media-box__desc {
		color: #aaa;
	}

	.weui-navbar {
		border-bottom-color: #666;
	}
	.weui-navbar::after{
		border-bottom-color: #666;
	}
	.weui-navbar__item {
		color: #999;
		padding: 10px 0;
		background-color: #2d3132;
	}
	.weui-navbar__item::after{
		border-right-color: #666;
	}
	.weui-navbar__item.weui-bar__item_on {
		color: #bbb;
		font-weight: bold;
		background-color: #2d3132;
	}
	
	.weui-tab__content{
		display: block;
	}
	.weui-article{
		padding: 0 5px;
	}
	.weui-article__h1,
	.weui-article__p {
		color: #ccc;
		margin-bottom: 1.2em;
	}

	.weui-article__p text {
		font-weight: bold;
	}
	.weui-cells{
		margin-top: 0;
		background-color: #2d3132;
	}
	.weui-cells::before{
		border: none;
	}
	.weui-cells::after{
		border: none;
	}

	.upvote {
		font-weight: normal;
	}

	.comment-info {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: small;
	}

	.comment-info view {
		display: inline;
	}

	.selected-vote {
		color: #c00;
	}

	.package-link {
		text-decoration: underline;
		color: rgb(103, 130, 182);
	}

	.topFixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}

	.topAbs {
		position: fixed;
		width: 100%;
		top: 90px;
		z-index: 1000;
	}

	.load-more {
		display: flex;
		justify-content: center;
	}

	.load-more-button {
		padding: 2px 10px;
		border: 1px solid #666;
		border-radius: 10px;
		color: #aaa;
		background-color: #2d3132;
	}

	.load-more-nomore {
		color: #aaa;
	}

	.comment-text {
		border: 1px solid #666;
		border-radius: 4px;
		padding: 4px 4px 0 4px;
		color: #aaa;
	}

	textarea {
		caret-color: #666;
	}

	.comment-text-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.comment-right-bottom {
		display: inline;
		font-size: small;
	}

	.comment-button {
		display: inline;
		padding: 1px 4px;
		border: 1px solid #666;
		border-radius: 4px;
	}

	.comment-emoji {
		padding: 2px 4px;
		border: 1px solid #666;
		border-radius: 4px;
		color: #aaa;
		font-size: small;
	}







	.model {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 0.8);
		z-index: 1001;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.modalDlg {
		background-color: #2d3132;
		width: 70%;
		left: 0;
		right: 0;
		z-index: 9;
		margin: 0 auto;
		border-radius: 6px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.windowRow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 2ex;
		width: 100%;
		align-items: center;
		margin: 30rpx;
		color: #aaa;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.back {
		
	}

	.userTitle {
	}

	.wishName {
		width: 100%;
		justify-content: center;
		flex-direction: row;
		display: flex;
		margin-bottom: 40rpx;
	}

	.wish_put {
		width: 80%;
		border: 1px solid #666;
		border-radius: 4px;
		padding-left: 10rpx;
		caret-color: #666;
		color: #aaa;
	}

	.wishbnt {
		width: 100%;
		/* font-size: 30rpx; */
		/* margin-bottom: 30rpx; */
		display: flex;
		justify-content: space-between;
	}

	.wishbnt_bt {
		width: 50%;
		background-color: #2d3132;
		color: #aaa;
		font-size: 30rpx;
		border: 1px solid #2d3132;
		border-top-color: #666;
		text-align: center;
		padding: 15rpx 0;
	}
</style>
